@layer utilities {
    .puzzle-shadow {
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    }
    .puzzle-hover {
        transition: transform 0.2s ease, filter 0.2s ease;
    }
    .puzzle-hover:hover {
        transform: translateY(-5px) scale(1.02);
        filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
    }
    .slot-highlight {
        background-color: rgba(59, 130, 246, 0.2);
        border-color: #3B82F6 !important;
    }
    .correct-position {
        border-color: #10B981 !important;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3) inset;
    }
    .wrong-position {
        border-color: #EF4444 !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) inset;
    }
    .puzzle-slot {
        transition: all 0.3s ease;
    }
    .original-image-overlay {
        background-color: rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
    }
    .original-image-container:hover .original-image-overlay {
        background-color: rgba(255, 255, 255, 0.4);
    }
    .double-click-effect {
        animation: doubleClick 0.5s ease;
    }
    @keyframes doubleClick {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(0.9); }
    }
    .selected {
        border-color: #3B82F6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
        transform: scale(1.05);
        z-index: 10;
    }
}
